<!doctype html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link th:href="@{/front-resource/css/style.css}" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"  media="all">
    <!-- Favicon -->
    <!-- Favicon and Touch Icons -->
    <link th:href="@{/front-resource/images/favicon.png}" rel="shortcut icon" type="image/png}">
    <link th:href="@{/front-resource/images/apple-touch-icon.png}" rel="apple-touch-icon">
    <link th:href="@{/front-resource/images/apple-touch-icon-72x72.png}" rel="apple-touch-icon" sizes="72x72">
    <link th:href="@{/front-resource/images/apple-touch-icon-114x114.png}" rel="apple-touch-icon" sizes="114x114">
    <link th:href="@{/front-resource/images/apple-touch-icon-144x144.png}" rel="apple-touch-icon" sizes="144x144">
    <title>Listri - Directory & Listing HTML Template</title>
    <style>
        /*初始化*/
        ul,li{
              list-style: none;
        }
        a{
             text-decoration: none;
              color: #666666;
        }
        body,p,ul,li,h1,h2,h3,h4,input,dd,tr,i{
              margin: 0;
              padding: 0;
        }
        body{
              font-size: 14px;
              font-family: Arial,"microsoft yahei";
        }
        .main{
              width: 1200px;
              margin: 0 auto;
        }
        a img{
              border:none;
        }
        .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
                                                                                         .clearfloat{zoom:1} 

                                                                                                                /*筛选*/
                                                                                                            .filter-title{
                                                                                                                line-height: 36px;
                                                                                                                height: 36px;
                                                                                                                background: #f1f1f1;
                                                                                                                border-bottom: 1px solid #ddd;
                                                                                                                border-top: 1px solid #ddd;
                                                                                                                padding: 0 10px;
                                                                                                                margin-bottom: 10px;
                                                                                                            }
        .filter-title span:first-child{
            color: #f42121;
            padding-right: 5px;
        }
        .filter-title span:nth-child(2){
            color: #999;
            padding-left: 20px;
        }
        .filter-title i.fa-angle-right{
            padding-left: 5px;
            font-size: 18px;
        }
        .filter-title button{
            line-height: 24px;
            height: 24px;
            padding: 0 10px;
            border: none;
            outline: medium;
            color: #fff;
        }
        .filter-title button.filter-btn{
            background: #F42121;
            margin-left: 20px;
        }
        .filter-title button.empty-btn{
            background: #aaa;
        }
        .filter-title a{
            border: 1px solid #ddd;
            color: #666;
            display: inline-block;
            line-height: 24px;
            padding: 0 10px;
            background: #fff;
            margin-right: 5px;
        }
        .filter-title a i{
            padding-left: 5px;
        }
        .filter-title a:hover{
            border-color: #F42121;
        }
        .filter-title a:hover i{
            color: #F42121;
        }

        .filter-item{
            border-bottom: 1px dashed #ddd;
            padding-top: 5px;
        }
        .filter-item:last-child{
            border-bottom: none;
        }
        .filter-left{
            width: 80px;
            float: left;
        }
        .filter-center{
            width: 1120px;
            float: left;
            padding-bottom: 5px;
        }
        .filter-center ul{
            max-height: 84px;
        }
        .filter-center li{
            float: left;
            text-align: center;
            background: #fff;
        }
        .filter-center li a{
            display: block;
            overflow: hidden;
            line-height: 34px;
            padding: 0 15px;
            height: 34px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; //文本行数
           text-overflow: ellipsis;
              white-space: nowrap;
              border: 1px solid #ddd;
              margin: 3px;
        }
        .filter-center li a:hover,.filter-center li a.active{
            color: #F42121;
            border-color: #F42121;
        }
    </style>

</head>
<body>
<!-- Start Main Menu Area -->
<div th:replace="/common/frontCommon::header"></div>
<!-- End Main Menu Area -->
<div class="filter-box main" style="margin-left: 21%;margin-top: 2%;margin-bottom: 2%;">
    <div>
        <form action="/hotel/search">
            <input type="hidden" name="indexSearch" value="notIndex"/>
            <div class="filter-item clearfloat">
                <div class="filter-left">位置：</div>
                <div class="filter-center">
                    <ul class="clearfloat">
                        <li>
                                <select name="countryId" id="countryId"  class="form-control" style="width: 176px;">
                                    <option th:each="country:${countries}" th:value="${country.countryId}" th:text="${country.countryName}"></option>
                                </select>
                        </li>
                        <li>
                                <select name="provinceId" id="provinceId"  class="form-control"  style="width: 176px;">
                                    <option value="">--请选择--</option>
                                    <option  th:each="province:${provinces}" th:value="${province.provinceId}" th:text="${province.provinceName}"></option>
                                </select>
                        </li>
                        <li>
                                <select name="cityId" id="cityId" class="form-control" style="width: 176px;">
                                    <option value="">--请选择--</option>
                                    <option  th:each="city:${cities}" th:value="${city.cityId}" th:text="${city.cityName}"></option>
                                </select>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="filter-item clearfloat">
                <div class="filter-left">价格：</div>
                <div class="filter-center">
                    <ul class="clearfloat">
                        <li>
                            <input name="minPrice" type="text" id="minPrice" >--<input name="maxPrice" type="text" id="maxPrice"  >元
                        </li>
                    </ul>
                </div>
            </div>
            <div class="filter-item clearfloat">
                <div class="filter-left">关键字：</div>
                <div class="filter-center">
                    <ul class="clearfloat">
                        <li>
                            <input type="text" name="keyName" id="keyName" th:value="${keyName}">
                        </li>
                    </ul>
                </div>
            </div>
            <button class="layui-btn layui-btn-normal" type="submit">查询</button>
            <a th:href="@{/hotel/display}"> <button class="layui-btn layui-btn-normal" type="button" style="margin-left:5%">全部清空</button></a>
        </form>
    </div>
</div>


<section class="Campaigns pt80 pb80">
    <div class="container">
        <h2>单页显示数量:</h2>
        <select id="pagehelper" class="form-control col-md-2" name="showing">
            <option th:selected="${pageSize == 6}" value="1" data-amount='6'>6</option>
            <option th:selected="${pageSize == 9}"  value="2" data-amount='9'>9</option>
            <option th:selected="${pageSize == 12}" value="3" data-amount='12'>12</option>
            <option th:selected="${pageSize == 15}"  value="4" data-amount='15'>15</option>
            <option th:selected="${pageSize == 18}"  value="5" data-amount='18'>18</option>
        </select>
        <div class="row" >
            <div class="col-md-4 col-sm-6 col-xs-12" th:each="hotel:${hotels}">
                <div class="ListriBox">
                    <figure>
                        <a th:href="@{'/hotel/detail?id='+${hotel.hotelId}}" class="wishlist_bt"></a>
                        <a th:href="@{'/hotel/detail?id='+${hotel.hotelId}}"><img th:src="@{'/img/hotel/'+${hotel.hotelImageName}}" class="img-fluid" alt="" >
                        <div class="read_more"><span>查看详情</span></div>
                        </a>
                    </figure>
                    <div class="ListriBoxmain">
                        <h3><a th:href="@{'/hotel/detail?id='+${hotel.hotelId}}" th:text="${hotel.hotelName}"></a></h3>
                        <i class="fa fa-crosshairs"></i>
                        <label class="address" th:text="${hotel.hotelLocation}"></label>
                    </div>
                    <ul>
                        <li th:id="hotelSignParent"><span th:attr="class=${hotel.hotelSign==0?'Rclosed':'Ropen'}" th:text="${hotel.hotelSign==0?'暂无空房':'可以预定'}" th:id="${hotel.hotelSign}" name="hotelSign" th:value="${hotel.hotelSign}"></span></li>
                        <li>
                            <div class="R_retings"><span></span><strong  th:text="'￥'+${hotel.lowPrize}+元起"></strong></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="paginationCommon blogPagination categoryPagination">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li > <a href="javascript:void(0);" aria-label="Previous" th:class="${pageNum==1}?'disabled':''" onclick="pagePrev()"> <span aria-hidden="true"><i class="fa fa-angle-left" aria-hidden="true"></i></span> </a> </li>
                    <li th:each="page:${pages}" th:class="${pageNum==page}?'active':''"><a th:text="${page}" name="pagen" href="javascript:void(0);" onclick="pagenumm(this)" class="page-link"> </a></li>
<!--                    <li class="active"><a href="#">1</a></li>-->
<!--                    <li><a href="#">2</a></li>-->
<!--                    <li><a href="#">3</a></li>-->
<!--                    <li><a href="#">4</a></li>-->
<!--                    <li><a href="#">5</a></li>-->
                    <li> <a href="javascript:void(0);" aria-label="Next" th:class="${pageNum==pageTotal||pageTotal==0}?'disabled':''" onclick="pageNext()"> <span aria-hidden="true"><i class="fa fa-angle-right" aria-hidden="true"></i></span> </a> </li>
                </ul>
            </nav>
        </div>
    </div>
</section>
<div th:replace="/common/frontCommon::footer"></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script th:src="@{/front-resource/js/jquery.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/popper.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/getfund-nav.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/owl.carousel.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/waypoints.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/jquery.counterup.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/swiper.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/custom.js}" type="text/javascript"></script>
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyCRSEJH8Z2UVyyaAv0TD7MY-IgclK5Izm8&amp;libraries=places&amp;callback=initAutocomplete"></script>
<script th:src="@{/front-resource/js/map_infobox.js}"></script>
<script th:src="@{/front-resource/js/markerclusterer.js}"></script>
<script th:src="@{/front-resource/js/maps.js}"></script>
<script>

    $("#countryId").change(function () {
        var countryId = $(this).val();
        $("#provinceId").empty();
        $.get('/province/getSome', {"countryId": countryId}, function (data) {
            $("#cityId").empty();
            $("#provinceId").append("<option value=''>--请选择--</option>");
            $("#cityId").append("<option value=''>--请选择--</option>");
            $.each(data, function (k, v) {
                var _ele = "<option value='" + v.provinceId + "'>" + v.provinceName + "</option>";
                $("#provinceId").append(_ele);
            });
        })
    });
    $("#provinceId").change(function () {
        var provinceId = $(this).val();
        $("#cityId").empty();
        $.get('/city/getSome', {"provinceId": provinceId}, function (data) {
            $("#cityId").append("<option value=''>--请选择--</option>");
            $.each(data, function (k, v) {
                var _ele = "<option value='" + v.cityId + "'>" + v.cityName + "</option>";
                $("#cityId").append(_ele);
            });
        })
    });

    // 每一页显示多少？
    $("#pagehelper").change(function(){
        var pagesize= $("#pagehelper").find("option:selected").attr("data-amount");
        window.location="display"+"?pageNum=1"+"&pageSize="+pagesize;
    });
    //第几页
    function pagenumm(object) {
        var pagesize= $("#pagehelper").find("option:selected").attr("data-amount");
        var pagenums = object.text;
        window.location="display"+"?pageNum="+pagenums+"&pageSize="+pagesize;
    }
    //前一页
    function pagePrev() {
        var pagesize= $("#pagehelper").find("option:selected").attr("data-amount");
        var pagenums = $("li.active").children(".page-link").text()-1;
        window.location="display"+"?pageNum="+pagenums+"&pageSize="+pagesize;
    }
    //后一页
    function pageNext() {
        var pagesize= $("#pagehelper").find("option:selected").attr("data-amount");
        var pagenums = $("li.active").children(".page-link").text();
        pagenums++;
        window.location="display"+"?pageNum="+pagenums+"&pageSize="+pagesize;
    }
</script>
</body>
</html>